<template>
  <!-- 动态渲染菜单侧边栏 -->
  <div class="outer">
    <el-menu unique-opened text-color="black" :router="true" :collapse="isCollapse" :collapse-transition="false">
      <el-submenu :index="item.perId + ''" v-for="item in menus" :key="item.perId">
        <template slot="title">
          <i :class="item.beiyong1"></i>
          <span>
            {{ item.perName }}
          </span>
        </template>
        <el-menu-item :index="subitem.href" v-for="subitem in item.children" :key="subitem._id">

          <i :class="subitem.beiyong1"></i>
          <span> {{ subitem.perName }} </span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- </el-aside> -->
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations: mapuserinfomutation, mapState: mapuserinfostate } =
  createNamespacedHelpers("userinfo");
export default {
  data() {
    return {
      menus: [],
      isCollapse: false,
      logotitle: "蜗牛在线实验室",
      userTel: "",

    };
  },
  methods: {
    async menu() {
      console.log('拿到了吗', this.loginUser);
      console.log('tel', this.loginUser.userTel);
      const result = await this.$api.user.getmenu({ userTel: this.loginUser.userTel });
      console.log("res", result);
      this.menus = result.data.menuList;
      // console.log("123", this.menus);
    },
    toggleCollpase() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.logotitle = "蜗牛";
      } else {
        this.logotitle = "蜗牛在线实验室";
      }
    },
  },
  created() {
    this.menu();
  },
  computed: {
    ...mapuserinfostate(["loginUser"]),
  }
};
</script>

<style scoped>
ul {
  border: none;
}

.outer {
  height: 93vh;
  background-color: white;
}

element.style {
  background-color: white;
}

li.el-menu-item.is-active {
  /* color: #2775b6 !important; */
  /* background-color: white !important; */
  border-radius: 36px 0 0 40px;
  /* margin-left: 20px; */
}

.el-submenu {
  border-bottom: 1px solid #edf1f7;
}

.el-menu-item {
  border-bottom: 1px solid #edf1f7;
}

.el-menu-item:focus {
  background-color: white;
  color: #3d6dff;
}

.el-submenu__title:hover {
  background-color: white;
}

.el-submenu__title:hover {
  background-color: white;
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: white;
}</style>